{$layout}

<!-- 检测配置更新 -->
<proxy-change-notify-box></proxy-change-notify-box>

{$var "footer"}
<!-- 地图相关 -->
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=DF6fe2b62ea3a7b2cd7a30694b79069f" ></script>
{$end}

{$template "/code_editor"}

<!-- 错误信息 -->
<p class="ui message error" v-for="err in errs">
	发生错误：{{err}}
</p>

<div class="ui menu text small blue">
	<a :href="'/proxy/log?serverId=' + server.id" class="item active">实时</a>
	<a :href="'/proxy/log/day?serverId=' + server.id + '&day=today'" class="item">今天</a>
	<a :href="'/proxy/log/day?serverId=' + server.id + '&day=yesterday'" class="item">昨天</a>
	<a :href="'/proxy/log/history?serverId=' + server.id" class="item">历史</a>
</div>

<div class="ui divider"></div>

<div class="ui menu text blue tiny">
	<a :href="'/proxy/log?serverId=' + server.id" class="item" :class="{active:logType == ''}">访问日志</a>
	<a :href="'/proxy/log?serverId=' + server.id + '&logType=errorLog'" class="item small" :class="{active:logType == 'errorLog'}">错误日志</a>
</div>

<div class="ui divider"></div>

<div v-if="mongoError.length > 0" class="ui message warning">
	{{mongoError}}，<a href="/settings/mongo">去配置</a> 或者启动本机的MongoDB后，<a href="/log">刷新此页面</a>。
</div>

<div v-if="mongoError.length == 0">
    <div class="search-box close" v-show="!searchBoxVisible">
        <button class="ui button tiny basic" type="button" @click="showSearchBox()" :class="{primary:hasSearchConditions()}" title="展开筛选条件">筛选 <i class="ui icon chevron down" :class="{white:hasSearchConditions()}"></i> </button> &nbsp;
        <button class="ui button tiny basic" type="button" v-if="isPlaying" @click="pause()" title="暂停日志刷新">暂停 <i class="ui icon pause"></i> </button>
        <button class="ui button tiny basic blue" type="button" v-if="!isPlaying" @click="pause()" title="恢复日志刷新">继续 <i class="ui icon play"></i> </button> &nbsp;
        <button class="ui button tiny basic blue" type="button" @click="startBodyFetching()" v-if="bodyFetching && isPlaying">抓取 <i class="ui icon code"></i> </button>
		<button class="ui button tiny basic blue" type="button" v-if="bodyFetching&&!isPlaying">暂停抓取 <i class="ui icon code"></i> </button>
		<button class="ui button tiny basic" type="button" @click="startBodyFetching()" v-if="!bodyFetching">抓取 <i class="ui icon code"></i> </button>
    </div>

    <div class="ui message info" v-if="bodyFetching && isPlaying">
        正在抓取请求的内容，可以在单个日志详情中的响应数据（Response）和请求数据（Request）中查看这些内容，<a href="" @click.prevent="startBodyFetching()">[停止]</a>
    </div>

    <div class="search-box" v-show="searchBoxVisible">
        <a href="" @click.prevent="hideSearchBox()" class="close-btn" :class="{'clean-btn':!hasSearchConditions()}" title="收起窗口"><i class="ui icon chevron up circular"></i></a>
        <a href="" @click.prevent="resetSearchBox()" class="clean-btn" v-if="hasSearchConditions()" title="重置条件"><i class="ui icon undo circular"></i></a>
        <form class="ui form">
            <div class="ui grid three column">
               <div class="ui field column">
                   终端IP：<input type="text" placeholder="x.x.x.x" v-model="searchIp" :class="{focus:searchIp.trim().length > 0}" @input="changeFilter()"/>
               </div>
                <div class="ui field column">
                    域名：<input type="text" name="domain" placeholder="比如 xxx.com" v-model="searchDomain" :class="{focus:searchDomain.trim().length > 0}" @input="changeFilter()"/>
                </div>
                <div class="ui field column">
                    终端OS：<input type="text" name="os" placeholder="比如 windows" v-model="searchOs" :class="{focus:searchOs.trim().length > 0}" @input="changeFilter()"/>
                </div>
                <div class="ui field column">
                    终端浏览器：<input type="text" name="browser" placeholder="比如 chrome" v-model="searchBrowser" :class="{focus:searchBrowser.trim().length > 0}" @input="changeFilter()"/>
                </div>
                <div class="ui field column">
                    耗时大于：
                    <div class="ui right labeled input">
                        <input type="text" name="minCost" placeholder="比如 10" v-model="searchMinCost" :class="{focus:searchMinCost.trim().length > 0}" @input="changeFilter()"/>
                        <div class="ui label">ms</div>
                    </div>
                </div>
                <div class="ui field column">
                    关键词：<input type="text" name="keyword" placeholder="比如 /user/profile" v-model="searchKeyword" :class="{focus:searchKeyword.trim().length > 0}" @input="changeFilter()"/>
                </div>
				<div class="ui field column">
					后端服务器：
					<select class="ui dropdown" v-if="server.backends != null && server.backends.length > 0" v-model="searchBackendId" @change="changeFilter()">
						<option value="">[没有选择]</option>
						<option v-for="backend in server.backends" :value="backend.id">{{backend.address}}</option>
					</select>
					<select class="ui dropdown" disabled="disabled" v-if="server.backends == null || server.backends.length == 0">
						<option value="">没有可选项</option>
					</select>
				</div>
				<div class="ui field column">
					路径规则：
					<select class="ui dropdown" v-if="server.locations != null && server.locations.length > 0" @change="changeLocation(searchLocationId)" v-model="searchLocationId">
						<option value="">[没有选择]</option>
						<option v-for="location in server.locations" :value="location.id">{{location.pattern}}</option>
					</select>
					<select class="ui dropdown" disabled="disabled" v-if="server.locations == null || server.locations.length == 0">
						<option value="">没有可选项</option>
					</select>
				</div>
				<div class="ui field column">
					重写规则：
					<select class="ui dropdown" v-if="location != null && location.rewrite != null && location.rewrite.length > 0" v-model="searchRewriteId" @change="changeFilter()">
						<option value="">[没有选择]</option>
						<option v-for="rewrite in location.rewrite" :value="rewrite.id">{{rewrite.pattern}}</option>
					</select>
					<select class="ui dropdown" disabled="disabled" v-if="location == null || location.rewrite == null || location.rewrite.length == 0">
					<option value="">没有可选项</option>
					</select>
				</div>
				<div class="ui field column">
					Fastcgi：
					<select class="ui dropdown" v-if="location != null && location.fastcgi != null && location.fastcgi.length > 0" v-model="searchFastcgiId" @change="changeFilter()">
						<option value="">[没有选择]</option>
						<option v-for="fastcgi in location.fastcgi" :value="fastcgi.id">{{fastcgi.pass}}</option>
					</select>
					<select class="ui dropdown" disabled="disabled" v-if="location == null || location.fastcgi == null || location.fastcgi.length == 0">
						<option value="">没有可选项</option>
					</select>
				</div>
            </div>
        </form>
    </div>

	{$template "log_row"}

    <div v-if="isLoaded && logs.length == 0">
        <a class="disabled" v-if="!hasSearchConditions()">当天还没有访问。</a>
        <span class="disabled" v-if="hasSearchConditions()">当天还没有筛选符合条件的访问，可以尝试去掉筛选条件（<a href="" @click.prevent="resetSearchBox()">清除筛选条件</a> ）。</span>
    </div>

    <!-- loading indicator -->
    <div v-if="!isLoaded">
        <div class="ui active inline loader small"></div> &nbsp; loading...
    </div>
</div>